<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="common/layout">
<head>
  <title>菜品修改</title>
</head>
<body>

<section layout:fragment="extra_scripts">
  <script src="/js/upload/jquery.ui.widget.js"></script>
  <script src="/js/upload/jquery.fileupload.js"></script>
  <script type="text/javascript" src="/js/uploader.js"></script>
  <script th:inline="javascript">
    function uploadMenuPic(){
      UploadManager.check_duplicate = false;
      UploadManager.onlyImages();
      UploadManager.upload();
    }

    window.uploadCallback = function(attachment) {
      attachment = attachment.data;
      // console.log(attachment);
      $("#photo-uploader").remove();
      $("#reupload_c").removeClass("hide");
//      $("#menu_submit").removeClass("hide");
      $("#menu-img").attr("src", attachment.url);
      $("#imgId").val(attachment.id);
    }

    function edit_cancel() {
      self.location.href = '/admin/menu';
    };

    $(function(){
      setTimeout(function(){
        $("#menuForm").ajaxForm({
                  callback: function(data) {
                    if (data.valid) {
                      self.location.href = data.url || '/';
                    } else {
                      alert(data.errorMsg);
                    }
                  },
                  validate: function(data) {

                    var menu_name = $("#menu_name").val();
                    if(menu_name.length==0){
                      alert("菜名不能为空");
                      return false;
                    }
                    if(menu_name.length>10){
                      alert("菜名最大长度为10");
                      return false;
                    }

                    var reg = /^\d+(\.\d+)?$/;
                    var discount = $("#menu_price").val();
                    if(reg.test(discount)==false){
                      alert("单价应输入数字！");
                      $("#menu_price").val( "");
                      return false;
                    }

                    var menu_unit = $("#menu_unit").val();
                    if(menu_unit.length==0){
                      $("#menu_unit").val("份");
                    }
                    if(menu_unit.length>10){
                      alert("单位最大长度为10");
                      return false;
                    }

                    var discount = $("#menu_discount").val();
                    if(reg.test(discount)==false){
                      alert("折扣应输入数字！");
                      $("#menu_discount").val( "");
                      return false;
                    }
                    if(discount<1 || discount>10){
                      alert("请输入正确的折扣信息(1-10)！");
                      $("#menu_discount").val( "");
                      return false;
                    }

                    var img_id = $("#imgId").val();
                    if(img_id.length==0){
                      alert("请确保图片上传完毕");
                      return false;
                    }
                    return true;
                  }
                }
        )
      },200);
    });

  </script>
</section>
<section layout:fragment="top_menu" style="text-align: left;padding-left: 20px">
  <span style="font-size: 20px">修改菜品</span>
</section>

<section layout:fragment="content">
  <div class="main" style="margin: 5px">
    <form id="menuForm" class="form" th:action="@{/admin/menu/{id}(id=${menu.id})}" th:object="${menu}" th:method="PUT">
        <table>
          <tbody>
          <tr>
            <td style="text-align: right">
              菜名
            </td>
            <td>
              <input id="menu_name" th:field="*{name}"  type="text" >
            </td>
          </tr>
          <tr>
            <td style="text-align: right">
              类别
            </td>
            <td>
              <select id="menu_category" th:field="*{categoryId}" th:value="*{categoryName}" mod="normal">
                <option th:each="category :${categories}"
                        th:value="${category.id}"
                        th:text="${category.name}"></option>
              </select>
            </td>
          </tr>
          <tr>
            <td style="text-align: right">
              单价
            </td>
            <td>
              <input id="menu_price" th:field="*{unitPrice}"  type="text" >
            </td>
          </tr>
          <tr>
            <td style="text-align: right">
              单位
            </td>
            <td>
              <input  id="menu_unit" th:field="*{unitName}"  type="text" >
            </td>
          </tr>
          <tr>
            <td style="text-align: right">
              折扣
            </td>
            <td>
              <input id="menu_discount" th:field="*{discount}"  type="text" >
            </td>
          </tr>
          <tr>
            <td style="text-align: right">
              推荐
            </td>
            <td>
              <select id="menu_recommend" th:field="*{recommend}" th:value="*{recommendFlag}" mod="normal">
                <option value=0>否</option>
                <option value=1>是</option>
              </select>
            </td>
          </tr>
          <tr>
            <td style="text-align: right">
              停售
            </td>
            <td>
              <select id="menu_stopSale" th:filed="*{stopSale}" th:value="*{stopSaleFlag}" mod="normal">
                <option value=0>否</option>
                <option value=1>是</option>
              </select>
            </td>
          </tr>
          <tr>
            <td style="text-align: right">
              图片
            </td>
            <td>
              <div class="photo-c" th:if="${menu.hasMenuPic()}">
                <a target="_blank" th:href="*{menuPicUrl}">
                  <img th:src="${menu.menuPicUrl}" id="menu-img"  class="menu-img" alt="">
                </a> <br>
                <a href="javascript:uploadMenuPic()">重新上传</a>
              </div>
              <div class="photo-c" th:unless="${menu.hasMenuPic()}">
                <div id="photo-uploader" onclick="uploadMenuPic()">
                  <div class="plus">
                    +
                  </div>
                  <div class="tips">
                    请上传图片<br>（JPG或者PNG格式，小于3M）
                  </div>
                </div>
                <div class="hide" id="reupload_c">
                  <img src="" id="menu-img"  class="menu-img" alt="">
                  <br>
                  <a href="javascript:uploadMenuPic()">重新上传</a>
                </div>
                </div>
              <input id="imgId" type ="hidden" th:field="*{imgId}" />
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align: center">
              <input type="submit" class=" new_button_yellow input_submit" value="保存">
              <input type="button" onclick="javascript:edit_cancel()"  class=" new_button_yellow " value="取消">
            </td>
          </tr>
          </tbody>
        </table>
    </form>
  </div>
</section>

</body>

</html>
